<template>
	<div class="dmleft">
		<tithead>数据监控</tithead>
		<div id="dmleftbox" style="height: 280rem;"></div>
	</div>
</template>
<script>
	export default {
		name: 'dmleft',
		data() {
			return {}
		},
		mounted() {
			let arr = [
				2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
			]
			let brr = [
				2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
			]
			let crr = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]

			let myChart = echarts.init(document.getElementById('dmleftbox'), 'light', {
				renderer: 'svg'
			})

			//this.$store.commit('setarr', myChart)
			myChart.setOption({
				aria: {
					enabled: true,
					decal: {
						show: true
					}
				},
				grid: {
					bottom: '5%',
					left: '5%',
					right: "5%",
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					},
					position: this.pf 
				},
				legend: {
					data: ['蒸发量', '沉淀量', '气温'],
					textStyle: {
						color: 'white'
					}
				},
				xAxis: [{
					type: 'category',
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周末'],
					axisPointer: {
						type: 'shadow'
					},
					axisLabel: {
						textStyle: { //改变xy轴上文字的颜色
							color: "#FFF"
						}
					}
				}],
				yAxis: [{
						type: 'value',
						name: '沉淀量',
						nameTextStyle: {
							color: 'white'
						},
						min: 0,
						max: 250,
						interval: 50,
						axisLabel: {
							formatter: '{value} ml'
						},
						axisLabel: {
							textStyle: { //改变xy轴上文字的颜色
								color: "#FFF"
							}
						},
						splitLine: {
							show: false
						}
					},
					{
						type: 'value',
						name: '气温',
						nameTextStyle: {
							color: 'white'
						},
						min: 0,
						max: 25,
						interval: 5,
						axisLabel: {
							formatter: '{value} °C'
						},
						axisLabel: {
							textStyle: { //改变xy轴上文字的颜色
								color: "#FFF"
							}
						},
						splitLine: {
							show: false
						}
					}
				],
				series: [{
						name: '蒸发量',
						type: 'bar',
						data: arr
					},
					{
						name: '沉淀量',
						type: 'bar',
						data: brr
					},
					{
						name: '气温',
						type: 'line',
						yAxisIndex: 1,
						data: crr,
						symbol: 'none', //不开启图标
						smooth: true, //折线平滑
						areaStyle: { //阴影颜色  下方映射区域采用渐变色
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#12cdf7' //渐变色上方颜色
								}, {
									offset: 1,
									color: 'transparent' //渐变色下方颜色
								}])
							}
						}
					}
				]
			})
			window.setInterval(() => {
				arr = arr.reverse()
				brr = brr.reverse()
				crr = crr.reverse()
				myChart.setOption({
					series: [{
							data: arr
						},
						{
							data: brr
						},
						{
							data: crr
						}
					]
				})
			}, 3000)
		}
	}
</script>
<style lang='scss'>
	.dmleft {
		margin: 10rem auto 0;
		width: 95%;

		.tit {
			display: inline-block;
			padding-left: 6rem;
			border-left: 6rem solid skyblue;
			color: white;
			font-size: 13rem;
		}
	}
</style>
